<template>
  <div>
  <div>{{drag?'拖拽中':'拖拽停止'}}</div>
  <!--使用draggable组件-->
 <draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">

      <table class="itxst">
            <tbody v-model=" myArray" is='draggable' animation="500"  force-fallback="true">
              <transition-group>
                <tr v-for="item in myArray" :key="item.id">
                    <td style="width:50px" class="move">{{item.id}}</td>
                    <td style="width:250px">{{item.name}}</td>
                </tr>
                </transition-group>
            </tbody>
        </table>
     <!-- <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> -->
</draggable>
  </div>
</template>
<style>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        }
        /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
        table.itxst {
            color: #333333;
            border: #ddd solid 1px;
            border-collapse: collapse;
        }

            table.itxst th {
                border: #ddd solid 1px;
                padding: 8px;
                background-color: #dedede;
            }

            table.itxst td {
                border: #ddd solid 1px;
                padding: 8px;
                background-color: #ffffff;
            }

            table.itxst tr {
                cursor: pointer;
            }

            table.itxst td.move:hover {
                cursor: move;
            }
</style>
<script>
//导入draggable组件
import draggable from "vuedraggable"
export default {
  //注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        {people: "cn",id: 1,name: "www.itxst.com"},
        {people: "cn",id: 2,name: "www.baidu.com"},
        {people: "cn",id: 3,name: "www.taobao.com"},
        {people: "us",id: 4,name: "www.google.com"}
      ]
    }
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
    }
  }
}
</script>